<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box">
			<image  src="../../../static/img/luo/search.png"></image>
			<input type="text" v-model="seachValue" confirm-type="search"
			placeholder="请输入订单号/姓名/服务" value="" />
		</view>
		<!-- nav -->
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#555555" @clickItem="onClickItem" />
				<!-- 待接单 -->	
				<view v-if="current === 0">
					<view class="server-box" v-for="items in filwaitGetOrderList">
						<!-- title -->
						<view class="server-title">
							<!-- 左 -->
							<view class="server-left">
								<view class="server-img">
									<image src="../../../static/img/luo/doctor.png"></image>
								</view>
								<view style="margin: 16rpx;">
									<text>{{items.serveType}}</text>
									<view style="color: #FF8040;">
										<text>￥</text>
										<text style="font-size: 40rpx;">{{items.titleMoney}}</text>
									</view>
								</view>
							</view>
							<!-- 右 -->
							<view class="server-right">
								<text>待接单<text v-if="items.isTransferOrders" style="color: #00BF87;">(转单)</text></text>
							</view>
						</view>
						<!-- main -->
						<view class="server-main">
							<view class="main-top">
								<text>服务用户：{{items.serveName}}</text>
								<text>服务地址：{{items.serveAdress}}</text>
								<text>服务时间：{{items.serveTime}}</text>
								<text v-if="items.isTransferOrders" style="color: #00BF87;">转单说明：{{items.serveReason}}</text>
							</view>
							<view class="main-bottom">
								<view class="tagItem" @click="transferOrder(items)">转单</view>
								<view class="tagItem" @click="cancelOrder(items)">取消订单</view>
								<view class="tagItem" @click="getOrder(items)">接单</view>	
							</view>
						</view>
					</view>
				</view>
				<!-- 待服务 -->
				<view v-if="current === 1">
					<view class="server-box" v-for="items in filwaitGetOrderList">
						<!-- title -->
						<view class="server-title">
							<!-- 左 -->
							<view class="server-left">
								<view class="server-img">
									<image src="../../../static/img/luo/doctor.png"></image>
								</view>
								<view style="margin: 16rpx;">
									<text>{{items.serveType}}</text>
									<view style="color: #FF8040;">
										<text>￥</text>
										<text style="font-size: 40rpx;">{{items.titleMoney}}</text>
									</view>
								</view>
							</view>
							<!-- 右 -->
							<view class="server-right">
								<text style="color: #F5A13C;font-size: 20rpx;">距离用户{{items.serverDistance}}m</text>
							</view>
						</view>
						<!-- main -->
						<view class="server-main">
							<view class="main-top">
								<text>服务用户：{{items.serveName}}</text>
								<text>服务地址：{{items.serveAdress}}</text>
								<text>服务时间：{{items.serveTime}}</text>
							</view>
							<view class="main-bottom">
								<view class="tagItem" @click="transferOrder(items)">转单</view>
								<view class="tagItem" @click="cancelOrder(items)">取消订单</view>
								<view class="tagItem" @click="startOrder(items)">开始服务</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 服务中 -->
				<view v-if="current === 2">
					<view class="server-box" v-for="items in filwaitGetOrderList">
						<!-- title -->
						<view class="server-title">
							<!-- 左 -->
							<view class="server-left">
								<view class="server-img">
									<image src="../../../static/img/luo/doctor.png"></image>
								</view>
								<view style="margin: 16rpx;">
									<text>{{items.serveType}}</text>
									<view style="color: #FF8040;">
										<text>￥</text>
										<text style="font-size: 40rpx;">{{items.titleMoney}}</text>
									</view>
								</view>
							</view>
							<!-- 右 -->
							<view class="server-right">
								<text v-if="items.isServing" style="color: #F5A13C;font-size: 20rpx;">服务中</text>
							</view>
						</view>
						<!-- main -->
						<view class="server-main">
							<view class="main-top">
								<text>服务用户：{{items.serveName}}</text>
								<text>服务地址：{{items.serveAdress}}</text>
								<text>服务时间：{{items.serveTime}}</text>
							</view>
							<view class="main-bottom">
								
								<view class="tagItem" @click="cancelOrder(items)">取消订单</view>
								<view class="tagItem" @click="startOrder(items)">确认完成</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 已完成 -->
				<view v-if="current === 3">
					<view class="server-box" v-for="items in filwaitGetOrderList">
						<!-- title -->
						<view class="server-title">
							<!-- 左 -->
							<view class="server-left">
								<view class="server-img">
									<image src="../../../static/img/luo/doctor.png"></image>
								</view>
								<view style="margin: 16rpx;">
									<text>{{items.serveType}}</text>
									<view style="color: #FF8040;">
										<text>￥</text>
										<text style="font-size: 40rpx;">{{items.titleMoney}}</text>
									</view>
								</view>
							</view>
							<!-- 右 -->
							<view class="server-right">
								<text v-if="items.isCompleted" style="color: #F5A13C;font-size: 20rpx;">已完成</text>
							</view>
						</view>
						<!-- main -->
						<view class="server-main">
							<view class="main-top">
								<text>服务用户：{{items.serveName}}</text>
								<text>服务地址：{{items.serveAdress}}</text>
								<text>服务时间：{{items.serveTime}}</text>
								<text v-if="!items.isCompleted" class="main-evaluated">综合评价：
								<uni-rate :readonly="true" :is-fill='false' :value="items.completeValues" :size="18" style="margin-top: -38rpx;margin-left:160rpx" />
								</text>
							</view>
							<view class="main-bottom">
								
								<view v-if="items.isEvaluated" class="tagItem" @click="evaluated(items)">评价</view>
								
							</view>
							
						</view>
					</view>
				</view>
				<!-- 已取消 -->
				<view v-if="current === 4">
					<view class="server-box" v-for="items in filwaitGetOrderList">
						<!-- title -->
						<view class="server-title">
							<!-- 左 -->
							<view class="server-left">
								<view class="server-img">
									<image src="../../../static/img/luo/doctor.png"></image>
								</view>
								<view style="margin: 16rpx;">
									<text>{{items.serveType}}</text>
									<view style="color: #FF8040;">
										<text>￥</text>
										<text style="font-size: 40rpx;">{{items.titleMoney}}</text>
									</view>
								</view>
							</view>
							<!-- 右 -->
							<view class="server-right">
								<text v-if="items.isCancel" style="color: #999999;font-size: 20rpx;">已取消</text>
								<text v-else style="color: #ff5500;font-size: 20rpx;">未取消</text>
							</view>
						</view>
						<!-- main -->
						<view class="server-main">
							<view class="main-top">
								<text>服务用户：{{items.serveName}}</text>
								<text>服务地址：{{items.serveAdress}}</text>
								<text>服务时间：{{items.serveTime}}</text>
								<text>取消原因：{{items.cancelReason}}</text>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
		<!-- footer -->
		<view class="footer">
			<button type="primary" @click="initiateService">发起服务</button>
		</view>
	</view>
		
</template>

<script>
	export default {
		data() {
			return {
				
				//search
				seachValue:'',
				//选项卡
				items: ['待接单', '待服务', '服务中','已完成','已取消'],
				current: 0,
				//待接单
				waitGetOrderList:[
				{
					id:1,
					titleMoney:29,
					isTransferOrders:true,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服务下',
					orderNumber:'111',
					serveType:'助医服务',
					waitGetOrderState:true,
				},
				{
					id:2,
					titleMoney:31,
					isTransferOrders:false,
					serveName:'李2鸣',
					serveAdress:'上海市黄浦区黄22浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服2务下',
					orderNumber:'121',
					serveType:'陪护服务',
					waitGetOrderState:true,
				},
				],
				//待服务
				waitServeList:[
				{	
					id:1,
					titleMoney:29,
					serverDistance:300,
					isTransferOrders:true,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服务下',
					orderNumber:'222',
					serveType:'助医服务',
					waitServeState:false,
				},
				{
					id:2,
					titleMoney:31,
					serverDistance:400,
					isTransferOrders:false,
					serveName:'李2鸣',
					serveAdress:'上海市黄浦区黄22浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服2务下',
					orderNumber:'221',
					serveType:'陪护服务',
					waitServeState:false,
				},
				],
				//服务中
				servingList:[
				{
					id:1,
					titleMoney:29,
					isServing:true,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服务下',
					orderNumber:'333',
					serveType:'陪护服务',
				},
				{
					id:2,
					titleMoney:29,
					isServing:false,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服务下',
					orderNumber:'331',
					serveType:'助医服务'
				},
				],
				//已完成
				completeList:[
				{
					id:1,
					titleMoney:29,
					isCompleted:true,
					isEvaluated:true,
					isShouEvaluted:false,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					completeValue:4,
					orderNumber:'444',
					serveType:'助医服务',
					completeValues:4,
				},
				{
					id:2,
					titleMoney:29,
					isCompleted:false,
					isEvaluated:false,
					isShouEvaluted:false,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					completeValue:4,
					orderNumber:'441',
					serveType:'陪护服务',
					completeValues:2,
				},
				],
				//已取消
				cancelList:[
				{	
					id:1,
					titleMoney:29,
					isTransferOrders:true,
					isCancel:true,
					serveName:'李一鸣',
					serveAdress:'上海市黄浦区黄浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服务下',
					cancelReason:'不需要了',
					orderNumber:'555',
					serveType:'陪护服务'
				},
				{
					id:2,
					titleMoney:31,
					isTransferOrders:false,
					isCancel:false,
					serveName:'李2鸣',
					serveAdress:'上海市黄浦区黄22浦江边',
					serveTime:'立即服务',
					serveReason:'帮忙服2务下',
					cancelReason:'不需要了',
					orderNumber:'551',
					serveType:'助医服务'
				},
				],
			}
		},
		onLoad(){
			
			// 2.拿到转单transferForm
			uni.getStorage({
				key:'transFromList',
				success:(res)=> {
					// console.log(res.data)
					this.waitGetOrderList.forEach((value)=>{
						if(value.orderNumber==res.data[0]){
							value.serveReason=res.data[2]
							value.isTransferOrders=true
						}
					})
					
				}
			})
			//3.拿到到cancelOrder返回的数据
			uni.getStorage({
				key:'cancelOrderMsg',
				success: (res) => {
					this.cancelList.forEach((value)=>{
						if(value.id==res.data[0]){
							value.cancelReason=res.data[1]
						}
					})
				}
			})
		},
		computed:{
			//search
			filwaitGetOrderList(){
				if(this.current === 0){
					return this.waitGetOrderList.filter((item)=>{
						return item.orderNumber.indexOf(this.seachValue) !==-1 
							|| item.serveName.indexOf(this.seachValue) !==-1 
							|| item.serveType.indexOf(this.seachValue) !==-1
					})
				}
				if(this.current === 1){
					return this.waitServeList.filter((item)=>{
						return item.orderNumber.indexOf(this.seachValue) !==-1 
							|| item.serveName.indexOf(this.seachValue) !==-1 
							|| item.serveType.indexOf(this.seachValue) !==-1
					})
				}
				if(this.current === 2){
					return this.servingList.filter((item)=>{
						return item.orderNumber.indexOf(this.seachValue) !==-1 
							|| item.serveName.indexOf(this.seachValue) !==-1 
							|| item.serveType.indexOf(this.seachValue) !==-1
					})
				}
				if(this.current === 3){
					return this.completeList.filter((item)=>{
						return item.orderNumber.indexOf(this.seachValue) !==-1 
							|| item.serveName.indexOf(this.seachValue) !==-1 
							|| item.serveType.indexOf(this.seachValue) !==-1
					})
				}
				if(this.current === 4){
					return this.cancelList.filter((item)=>{
						return item.orderNumber.indexOf(this.seachValue) !==-1 
							|| item.serveName.indexOf(this.seachValue) !==-1 
							|| item.serveType.indexOf(this.seachValue) !==-1
					})
				}
		}
		
		},
		methods: {
			//导航栏
			onNavigationBarButtonTap(e){
				const index = e.index;
				console.log(index)
				if(index==0){
					uni.redirectTo({
						url:'../../index/index'
					})
				}else{
					uni.navigateTo({
						url:'../../deng/message/message'
					})
				}
			},
			// 选项卡
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// main
			//转单
			transferOrder(items){
				uni.setStorage({
					key:'orderNumber',
					data:items.orderNumber,
					success() {
						uni.navigateTo({
							url:'../transferForm/transferForm'
						})
					}
				})
			},
			//取消订单
			cancelOrder(items){
				let id=items.id
				//console.log(id)
				uni.navigateTo({
					url:`../cancelOrder/cancelOrder?id=${id}`
				})
			},
			//接单
			getOrder(items){
				items.waitGetOrderState=false
				this.waitServeList.forEach((value)=>{
					if(value.id==items.id){
						value.waitServeState=true
						// console.log(value.waitServeState)
					}
				})
				// 调至订单详情
				uni.navigateTo({
					url:`../orderDetails/orderDetails?id=${items.id}`
				})
				
			},
			//待服务
			startOrder(items){
				// console.log("开始服务")
				items.waitServeState=false
				this.servingList.forEach((value)=>{
					if(value.id==items.id){
						value.isServing=true
						// console.log(value.isServing)
					}
				})
			},
			//服务中
			complete(items){
				// console.log('确认完成')
				items.isServing=false
				this.completeList.forEach((value)=>{
					if(value.id==items.id){
						value.isCompleted=true
						// console.log(value.isCompleted)
					}
				})
			},
			//已完成
			evaluated(items){
				// console.log('评价')
				items.isShouEvaluted=true
				items.isEvaluated=false
				let id=items.id
				//console.log(id)
				uni.navigateTo({
					url:`../../deng/evaluate/evaluate?id=${items.id}`
				})
			},
			getcompleteValues(e,items){
				// items.isShouEvaluted=false
				// items.isEvaluated=true
				if(e.detail.value==1||e.detail.value==2
				||e.detail.value==3||e.detail.value==4||e.detail.value==5){
					// console.log(e.detail.value)
					items.isShouEvaluted=false
					items.isEvaluated=false
					//更改一个
					this.completeList.forEach((value)=>{
						if(value.id==items.id){
							value.completeValues=e.detail.value
							value.isCompleted=false
							// console.log(value.isCompleted)
						}
					})
					items.isCompleted=false
				}else{
					items.isShouEvaluted=false
					items.isEvaluated=true
					uni.showToast({
						title:"请输入1-5之间的整数",
						duration:500,
						icon:'none'
					})
				}
			},
			//footer
			initiateService(){
				uni.navigateTo({
					url:'../../deng/service/service'
				})
			}
		}
	}
</script>

<style scoped>
	/* search */
.search-box{
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 2rpx solid #CDCDCD;
	margin: 20rpx;
	padding: 10rpx;
	align-items: center;
	border-radius: 10rpx;
	box-shadow: 0 0 1rpx 0 #CDCDCD;
}
.search-box image{
	width: 50rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
/* server */
.server-box{
	display: flex;
	flex-direction: column;
	border: 2rpx solid #CDCDCD;
	margin: 15rpx;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 1rpx 1rpx #CDCDCD;
}
.server-title{
	display: flex;
	flex-direction: row;
	margin: 30rpx;
	justify-content: space-between;
	align-items: center;
}
.server-left{
	display: flex;
	flex-direction: row;
}
.server-img{
	background-color: #3776E5;
	width: 70rpx;
	height: 70rpx;
	padding: 20rpx;
}
.server-img image{
	width: 70rpx;
	height: 70rpx;
}
.server-main{
	border-top: 4rpx solid #CDCDCD;
	margin: -10rpx 10rpx 10rpx 10rpx;
}
.main-top{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	margin: 10rpx;
}
.main-top text{
	margin: 5rpx;
}
.main-bottom{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	font-size: 20rpx;
}
.tagItem{
	border: 1rpx solid #007AFF;
	border-radius: 10rpx;
	margin-left: 20rpx;
	box-sizing: border-box;
	width: 120rpx;
	text-align: center;
	color: #406BDB;
	height: 50rpx;
	line-height: 50rpx;
	
}
/* 评价 */
.evaluated-box{
	border: 1rpx solid #007AFF;
	border-radius: 10rpx;
	width: 320rpx;
}
/* footer */
.footer{
	margin: 15rpx;
}
</style>
